<template>
    <div class="page-content">
        <div class="comm-content" ref="box"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }
    },
    computed:{
        themeStatus(){
            return this.$store.state.theme
        }
    },
    watch:{
        themeStatus(){
            this.myEcharts.dispose()
            this.initEcharts()
            this.getdata()
            this.screen()
        }
    },
    mounted() {
        this.initEcharts()
        this.getData()
        window.addEventListener('resize',this.screen)
        this.screen()
    },
    destroyed(){
        window.removeEventListener('reset',this.screen)
    },
    methods: {
        // 适配屏幕
        screen(){
            this.myEcharts.resize()
            // 计算一个文字大小的比例
            let width =  this.$refs.box.offsetWidth
            let num = width / 100*4.5
            let options={
                title:{
                    textStyle:{ //设置主标题样式
                        fontSize:num
                    }
                }
            }
            // 修改图标样式以后要重绘
            this.myEcharts.setOption(options)
        },
        // 初始化图标
        initEcharts() {
            let box = this.$refs.box
            // 初始化echarts
            this.myEcharts = this.$echarts.init(box,this.themeStatus)
            let options = { //设置图标的属性和样式
                title: { //主标题
                    text: '全国种植每月收成情况',
                    left: 10,
                    top: 10
                },
                // grid: {
                //     left: '10%',
                //     right: '10%',
                //     top: '10%',
                //     bottom: '10%'
                // },
                // tooltip: {
                //     show: true
                // },
                // xAxis: {
                //     show: true,
                //     axisLine: {
                //         show: true
                //     }
                // },
                // toolbox: {  //工具箱
                //     show: true,
                //     feature: {
                //         saveAsImage: { //保存图片
                //             type: 'png'
                //         },
                //         dataView: {
                //             show: true
                //         }
                //     }
                // },
                // axisPointer: {
                //     show: true
                // },
                xAxis:{
                    show:true,
                    type: 'category'
                },
                yAxis: {
                    show: true,
                    type: 'category'
                },
                series: [{
                    type: 'bar',
                    itemStyle: { // 设置图标颜色
                        opactiy: 0.8, //柱状透明度
                        borderRadius:[50,50,0,0],
                        color:{
                            colorStops:[
                                {
                                offset:0,
                                color:'#0F3357',
                            },
                            {
                                offset:1,
                                color:'#36BFE5',
                            }
                        ]
                        }
                    }
                }],


            }
            // 绘制图标
            this.myEcharts.setOption(options)
        },
        // 获取数据
        async getData() {
            let dataList = await this.$http('/api/plantingHarvest')
            console.log(dataList)   
            let dataMonth= dataList.data.map(item => {
                return item.month
            })
            let data = dataList.data.map(item => {
                return item.harvest
            })
            this.setEcharts(dataMonth, data);
        },

        // 绘制图标
        setEcharts(dataMonth, data) {
            console.log(dataMonth, data);
            let options = {
                xAxis: {
                    data: dataMonth
                },
                series:[{
                        
                        data:data
                    }]
             
            }
            this.myEcharts.setOption(options)
        }

    }


}
</script>
<style ></style>